import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:group_list_view/group_list_view.dart';
import 'package:share_fit/app/components/back_btn_icon.dart';
import 'package:share_fit/app/controllers/device/sos/settings_sos_logic.dart';
import 'package:share_fit/app/helper/ext/tr_ext.dart';
import 'package:share_fit/app/models/device/contact_model.dart';
import 'package:share_fit/app/tools/color_const.dart';
import 'package:share_fit/generated/locales.g.dart';

class SelectContactsPage extends StatelessWidget {
  SelectContactsPage({super.key});

  final logic = Get.find<SettingsSosLogic>();
  final state = Get.find<SettingsSosLogic>().state;

  @override
  Widget build(BuildContext context) {
    return GetBuilder<SettingsSosLogic>(builder: (logic) {
      return Scaffold(
          appBar: AppBar(
            leading: BackBtnIcon(onTap: () => {Get.back()}),
            centerTitle: true,
            title: Text(LocaleKeys.sos_number.ts,
                style: TextStyle(fontSize: 54.sp)),
            actions: [
              GetBuilder<SettingsSosLogic>(
                  id: "save_button",
                  builder: (logic) {
                    return Offstage(
                      offstage: !state.contactItemChecked,
                      child: TextButton(
                          onPressed: () => logic.onSave(),
                          child: Text(LocaleKeys.person_save.ts, style: const TextStyle(color: Colors.black))),
                    );
                  })
            ],
          ),
          body: FutureBuilder(
              future: logic.fetchContacts(),
              builder: (context, snapshot) {
                return snapshot.connectionState == ConnectionState.done
                    ? snapshot.hasData
                    ?_buildBody(context, snapshot.data!)
                    : const Center()
                    : Center(child: CircularProgressIndicator(color: ColorConst.activeColor,),);
              }));
    });
  }

  _buildBody(BuildContext context, List<ContactModel> contactList) {
    return Padding(
      padding: EdgeInsets.only(left: 43.w, right: 43.w, top: 10.h),
      child: GetBuilder<SettingsSosLogic>(
          id: "list_view",
          builder: (logic) {
            return  GroupListView(
              sectionsCount: contactList.length,
              countOfItemInSection: (int section) {
                return contactList[section].contacts.length;
              },
              itemBuilder: (BuildContext context, IndexPath index) {
                return _buildListWidget(context, contactList[index.section].contacts[index.index]);
              },
              groupHeaderBuilder: (BuildContext context, int section) {
                return SizedBox(
                  height: 120.h,
                  child: Padding(
                    padding: EdgeInsets.symmetric(vertical: 30.h),
                    child: Text(contactList[section].section,
                      style: TextStyle(
                          fontSize: 42.sp, color: const Color(0xff434343)),
                    ),
                  ),
                );
              },
              separatorBuilder: (context, index) => SizedBox(height: 40.h),
              sectionSeparatorBuilder: (context, section) => SizedBox(height: 10.h),
            );
          }),
    );
  }

  _buildListWidget(BuildContext context, contactItem) {
    return Column(
      children: [
        Container(
          padding: EdgeInsets.only(left: 60.w, right: 10.w),
          decoration: BoxDecoration(
            color: Colors.white70.withOpacity(0.9),
            borderRadius: BorderRadius.circular(60.r),
          ),
          height: 175.h,
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Column(
                mainAxisAlignment: MainAxisAlignment.center,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Container(
                    constraints: BoxConstraints(
                      maxWidth: 700.w,
                    ),
                    child: Text(
                      contactItem.name,
                      maxLines: 1,
                      style: TextStyle(
                          fontSize: 48.sp, color: const Color(0xff434343)),
                      overflow: TextOverflow.ellipsis,
                    ),
                  ),
                  Text(
                    contactItem.phone,
                    style:
                    TextStyle(fontSize: 36.sp, color: const Color(0xff434343)),
                  ),
                ],
              ),
              _showCheckBox(contactItem),
            ],
          ),
        ),
        // SizedBox(height: 40.h,)
      ],
    );
  }

  Widget _showCheckBox(ContactItem contact) {
    return Checkbox(
      activeColor: Colors.red,
      value: contact.imported,
      onChanged: (value) => logic.onContactCheck(contact, value),
      shape: const CircleBorder(),
    );
  }
}
